<template>
  <div v-if="menuList.length">
    <van-tabs class="list" @click="handleClick" v-model="activeIndex">
      <van-tab
        v-for="(item, index) in menuList"
        :key="index"
        :title="item.name"
        :name="index"
      >
        <slot></slot>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import api from '../../api/index'

export default {
  data() {
    return {
      menuList: [],
      activeIndex: 0
    }
  },

  methods: {
    handleClick(active) {
      this.$emit('change', active)
    },
    slideTo(index) {
      this.activeIndex = index
    }
  },

  async mounted() {
    let res = await api.getProjectCategory()
    if (!res) return
    if (!res.success) return
    this.menuList = res.data.list
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/styles/vars.less';
.list {
  overflow: hidden;
  width: 100%;
  /deep/ .van-tabs__line  {
    background-color: @color-primary;
  }
}
</style>
